More JavaScript Buttons

Browser Compatibility: NS4+, IE4+

If your browser is a version 4 or better, click on the image below. It works in the same way as a form button, but we can use the mouseover effect and customize the color. Give it a try:

Now how in the world is that done? Well, version 4 browsers allow us to use a few more mouse events. This button uses the onMouseover and onMouseout, and two new ones: onMouseDown and onMouseUp. These work in much the same way, they are just call when a viewer clicks or lets go of the mouse button:

onMouseDown The viewer clicked the mouse button.

onMouseUp The viewer let go of the mouse button.

How is this different than onClick? With these events, we are able to separate the click into its two parts: The button going down, and the button going back up. In this way, we are able to change the image to act like a form button. When you press the mouse button down, you get the "down button" image. When you let go, you get the "up button" image. Let's look at the HTML first this time (the reverse of my normal routine!). You will see that we can call a function on each event:

Also, you'll notice that I made the image do nothing when clicked. I used a javascript link, but a special one. I linked to the void() function, which does nothing when you send it zero! So you could simply link to nothing like this:

<A HREF="javascript:void(0)">Click Here!</A>

The link would do nothing, but sometimes it comes in handy.

Now, back to the script. To get this image to do all of these things, we have to have the functions. So, here is the script for your HEAD tags:

<HEAD>
<SCRIPT language="JavaScript">
<!--
if (document.images)
{
pic1on= new Image(62,28);
pic1on.src="/images/upbutblue.gif";
pic1off= new Image(62,28);
pic1off.src="/images/upbutlav.gif";
pic1down=new Image(62,28);
pic1down.src="/images/dbutblue.gif";
}

function lightup(imgName)
{
if (document.images)
{
imgOn=eval(imgName + "on.src");
document[imgName].src= imgOn;
}
}

function turnoff(imgName)
{
if (document.images)
{
imgOff=eval(imgName + "off.src");
document[imgName].src= imgOff;
}
}

function clickdown(imgName)
{
if (document.images)
{
imgDown=eval(imgName + "down.src");
document[imgName].src=imgDown;
}
}
//-->
</SCRIPT>
</HEAD>

You'll notice this is the same script I used for the hover buttons, but with a couple of modifications. I updated the code to use object detection, and I added a new function called clickdown() to be used on the onMouseDown event.

The object detection simply checks to see if the browser can support the script. Here, we can check for the document.images object. This is an object that allows for javascript to access the images in a document. If it exists, the browser moves on with the script. If not, it ignores what follows the check.

Also, when you use the script be sure you have the third image. The "down button" image will be needed for our clickdown() function. So, this script uses three images:

upbutlav.gif
This is the image used when nothing is going on.

upbutblue.gif
This is the image used when the viewer moves the mouse over the image, and when the mouse button is let go (onMouseUp).

dbutblue.gif
This is the image used when the viewer presses the mouse button (onMOuseDown).

The new function does the same thing the old ones did, it changes the image. If we look at the HTML code again, you will see that we call our new clickdown() function with the onMOuseDown event. This makes the image change when the viewer presses the mouse button, so we get the "down button". As for the onMouseUp, we reuse the lightup() function, since this holds the image for the "up button".

Now, in your HTML, you can use a live link instead of the void(0) link:

Now, you would get a live button, like this one:

Well, that does it for this section, lets go on to: External JavaScripts.